<template>
  <div>
    <!--    模糊查询-->
    <el-form :inline="true" :model="selectRepair" class="demo-form-inline">
      <el-form-item label="保修状态">
        <el-input v-model="selectRepair.repairState" placeholder="保修状态"></el-input>
      </el-form-item>
      <el-form-item label="业主姓名">
        <el-input v-model="selectRepair.ownerRealName" placeholder="业主姓名"></el-input>
      </el-form-item>
      <el-form-item label="业主电话">
        <el-input v-model="selectRepair.ownerPhoneNumber" placeholder="业主电话"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!--    表格数据-->
    <el-button type="warning" @click="outExe">导出</el-button>
    <el-table
        :data="repairPage"
        style="width: 100%"
        id="enableExportExcel">
      <el-table-column
          fixed
          prop="repairId"
          label="序号"
          width="100">
      </el-table-column>
      <el-table-column
          prop="repairNum"
          label="报修编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="repairState"
          label="报修状态"
          width="120">
      </el-table-column>
      <el-table-column
          prop="ownerRealName"
          label="业主姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="ownerPhoneNumber"
          label="业主电话"
          width="120">
      </el-table-column>

      <el-table-column
          prop="repairContent"
          label="报修内容"
          width="150">
      </el-table-column>
      <el-table-column
          prop="address"
          label="详细地址"
          width="120">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="160">
      </el-table-column>
      <el-table-column
          prop="doorTime"
          label="期待上门时间"
          width="160">
      </el-table-column>
      <el-table-column
          prop="completeName"
          label="处理人姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button
              @click.native.prevent="showRowDetail(scope.row)"
              type="text"
              size="small">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>


    <!-- 详情对话框 -->
    <el-dialog title="报修详细信息" :visible.sync="repairDetailDialogFormVisible" width="800px">
      <el-form :model="repair">
        <el-row>
          <el-col span="12">
            <el-form-item label="报修编号" :label-width="formLabelWidth">
              <el-input v-model="repair.repairId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="报修状态" :label-width="formLabelWidth">
              <el-input v-model="repair.repairState" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="业主姓名" :label-width="formLabelWidth">
              <el-input v-model="repair.userId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="创建时间" :label-width="formLabelWidth">
              <el-input v-model="repair.createTime" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="派单时间" :label-width="formLabelWidth">
              <el-input v-model="repair.assignmentTime" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="接单时间" :label-width="formLabelWidth">
              <el-input v-model="repair.receivingOrderTime" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="12">
            <el-form-item label="处理完成时间" :label-width="formLabelWidth">
              <el-input v-model="repair.completeTime" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="取消时间" :label-width="formLabelWidth">
              <el-input v-model="repair.cancelTime" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="期待上门时间" :label-width="formLabelWidth">
              <el-input v-model="repair.doorTime" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="分派人Id" :label-width="formLabelWidth">
              <el-input v-model="repair.assignmentId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="处理人姓名" :label-width="formLabelWidth">
              <el-input v-model="repair.completeId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="处理人电话" :label-width="formLabelWidth">
              <el-input v-model="repair.completePhone" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="报修内容" :label-width="formLabelWidth">
              <el-input v-model="repair.repairContent" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="详细地址" :label-width="formLabelWidth">
              <el-input v-model="repair.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="repair.remark" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="小区Id" :label-width="formLabelWidth">
              <el-input v-model="repair.communityId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="repairDetailDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="repairDetailDialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
  methods: {
    handleSizeChange(val) {
      this.size = val
      this.loadRepairPage()
    },
    handleCurrentChange(val) {
      this.current = val
      this.loadRepairPage()
    },
    //展示维修信息详情
    showRowDetail(row) {
      this.repair = row
      this.repairDetailDialogFormVisible = true
    },
    //装载数据
    loadRepairPage() {
      this.axios.get("/zyRepair/page?"
          + "current=" + this.current
          + "&size=" + this.size
          + "&repairState=" + this.selectRepair.repairState
          + "&ownerRealName=" + this.selectRepair.ownerRealName
          + "&ownerPhoneNumber=" + this.selectRepair.ownerPhoneNumber
      )
          .then(result => {
            this.repairPage = result.data.data.records
            this.total = result.data.data.total
          })
    },
    //提交查询表单
    onSubmit() {
      this.loadRepairPage()
    },
    //   导出表格数据为Excel
    //导出excel表格
    outExe() {
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.excelData = this.deptList; //你要导出的数据list。
            this.exportExcel();
          })
          .catch(() => {
          });
    },
    exportExcel() {
      //转换成excel时，使用原始的格式
      var xlsxParam = {raw: true};
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#enableExportExcel").removeChild(fix), xlsxParam);
        document.querySelector("#enableExportExcel").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#enableExportExcel"), xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream"}), "导出详情单.xlsx");
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  },
  data() {
    return {
      //当前页数
      current: 1,
      //每页有行
      size: 5,
      //数据总数
      total: 0,
      selectRepair: {
        repairState: "",
        ownerRealName: "",
        ownerPhoneNumber: ""
      },
      //维修分页数据
      repairPage: null,
      // 单条维修数据
      repair: {
        // 报修ID
        repairId: '',
        // 报修编号
        repairNum: '',
        // 报修状态
        repairState: '',
        // 派单时间
        assignmentTime: '',
        // 接单时间
        receivingOrderTime: '',
        // 处理完成时间
        completeTime: '',
        // 取消时间
        cancelTime: '',
        // 期待上门时间
        doorTime: '',
        // 分派人Id
        assignmentId: '',
        // 处理人ID
        completeId: '',
        // 处理人电话
        completePhone: '',
        // 处理人姓名
        completeName: '',
        // 备注
        remark: '',
        // 创建者
        createBy: '',
        // 创建时间
        createTime: '',
        // 更新者
        updateBy: '',
        // 更新时间
        updateTime: '',
        // 创建人Id
        userId: '',
        // 删除状态
        delFlag: '',
        // 报修内容
        repairContent: '',
        // 小区Id
        communityId: '',
        // 详细地址
        address: '',
      },
      // 详情对话框是否可见属性
      repairDetailDialogFormVisible: false,
      // 表单标签宽度
      formLabelWidth: "100px"
    }
  },
  mounted() {
    this.loadRepairPage()
  }
}
</script>